<!DOCTYPE html>
<html>
<head>
    {include file="public/head"}
</head>
<body>
<div class="g-scrollview">
    <div style="margin-top: -60px;">
        <img src="/static/img/logo.png" alt="" width="100%" height="100%">
    </div>
    <form action="reg" method="post" id="reg_form">
        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-left">用户名：</div>
                <div class="cell-right">
                    <input type="text" class="cell-input" placeholder="请输入用户名" name="nickname" autocomplete="off" required/>
                </div>
            </div>
            <div class="cell-item">
                <div class="cell-left">手机号：</div>
                <div class="cell-right">
                    <input type="number" pattern="[0-9]*" class="cell-input" placeholder="请输入登录手机号" name="phone" autocomplete="off" required id="phone"/>
                </div>
            </div>
            <div class="cell-item">
                <div class="cell-left"><i class="cell-icon demo-icons-phone"></i>验证码：</div>
                <div class="cell-right">
                    <input type="number" class="cell-input" placeholder="请输入验证码" autocomplete="off" name="verify_code" required id="code"/>
                    <a href="javascript:;" class="btn btn-warning" id="J_GetCode">获取短信验证码</a>
                </div>
            </div>
            <div class="cell-item">
                <div class="cell-left">密 码：</div>
                <div class="cell-right">
                    <input type="password" class="cell-input" placeholder="请输入登录密码" autocomplete="off" name="password" required/>
                </div>
            </div>
            <div class="m-button">
                <button class="btn-block btn-primary" id="reg" type="button">注 册</button>
                <a href="/index/app/download" class="btn-block btn-warning">APP下载</a>
            </div>
        </div>
    </form>
</div>

{include file="public/js"}
<script>
    !function ($) {
        var $getCode = $('#J_GetCode');
        // 定义参数
        $getCode.sendCode({
            disClass: 'btn-disabled', // 禁用按钮样式【必填】
            secs: 60, // 倒计时时长 [可选，默认：60秒]
            run: false,// 是否初始化自动运行 [可选，默认：false]
            runStr: '{%s}秒后重新获取',// 倒计时显示文本 [可选，默认：58秒后重新获取]
            resetStr: '重新获取验证码'// 倒计时结束后按钮显示文本 [可选，默认：重新获取验证码]
        });

        $getCode.on('click', function () {
            var $this = $(this);
            dialog.loading.open('发送中...');
            // ajax 成功发送验证码后调用【start】
            $.post('/api/sms/getValidateCode',{phone : $('#phone').val()},function (res) {
                dialog.loading.close();
                $this.sendCode('start');
                dialog.toast(res.msg, 'success', 1500);
            });
        });
        // 注册
        $reg_form=$('#reg_form');
        $(document).on('click','#reg',function () {
            dialog.confirm('温馨提示','你即将注册成为华兴用户',function () {
                // 验证验证码的有效性
                $.post('/api/sms/validateInputCode',{phone : $('#phone').val(),'code' : $('#code').val()},function (res) {
                    if (res.state == 'success'){
                        $.post($reg_form.attr('action'),$reg_form.serialize(),function (res) {
                            dialog.toast(res.msg,'none',1000,function () {
                                location.href=res.url;
                            });
                        });
                    }else {
                        dialog.toast(res.msg,'none',1000);
                    }
                });
            });
        });
    }(jQuery);
</script>
</body>
</html>